<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'主案会信息'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">完工</p>
            <div class="analyItemCon">
                <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>完工流程 / 级别标准</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(11,inputWG)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputWG"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputWGList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputWGList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">项订</p>
            <div class="analyItemCon">
                <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>项目订单标准【经理、项经】</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(12,inputXD)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputXD"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputXDList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputXDList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">项管</p>
            <div class="analyItemCon">
              <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>项经级别/入离职</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(13,inputXG)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputXG"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputXGList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputXGList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">工人</p>
            <div class="analyItemCon">
              <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>工人体系/工人订单流</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(14,inputGR)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputGR"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputGRList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputGRList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">材料</p>
            <div class="analyItemCon">
              <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>材料商入驻标准/功能店</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(15,inputCL)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputCL"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputCLList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputCLList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">财务</p>
            <div class="analyItemCon">
              <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>结算流程/标准</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(16,inputCW)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputCW"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputCWList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputCWList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="analyItem">
           <p class="analyItemTit tx-center">成本</p>
            <div class="analyItemCon">
              <p class="col-md-10">
                    <span class="cLightGray pr8">课程</span>
                    <span>发包流程/成本管理【材料、人工、利润等】</span>
                </p>
                <p class="col-md-2" style="position: absolute;right:0px;top:44%">
                    <el-button @click="saveManageTrain(17,inputCB)" type="primary">确定</el-button>
                </p>
                <p class="col-md-12">
                    <span class="col-md-1 cLightGray ">说明</span>
                    <span  class="col-md-8">
                        <el-input v-model="inputCB"  placeholder="暂无"></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', inputCBList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{inputCBList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">完工</span>
                    <span class="cPurple pr8">{{inputWGbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">项订</span>
                    <span class="cPurple pr8">{{inputXDbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">项管</span>
                    <span class="cPurple pr8">{{inputXGbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">工人</span>
                    <span class="cPurple pr8">{{inputGRbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">材料</span>
                    <span class="cPurple pr8">{{inputCLbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">财务</span>
                    <span class="cPurple pr8">{{inputCWbottom}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">成本</span>
                    <span class="cPurple pr8">{{inputCBbottom}}</span>
                </p>
                <p class="col-md-10 pt20">
                    <span class="col-md-1 cLightGray ">备注</span>
                    <span  class="col-md-8 lh20">
                        <el-input v-model="inputHandel"  placeholder="请输入处理备注..."></el-input>
                    </span>
                </p>
                 <span  :class="['circlemark', JLYList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{JLYList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
         <div class="tx-center">
            <el-button @click="saveManageTrain(4,inputHandel)" type="primary">保存</el-button>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { saveManageTrain } from '../../Resources/Api'

export default {
    data () {
        return {
            inputWG: '',
            inputWGbottom: '',
            inputWGList: {},

            inputXD: '',
            inputXDbottom: '',
            inputXDList: {},

            inputXG: '',
            inputXGbottom: '',
            inputXGList: {},

            inputGR: '',
            inputGRbottom: '',
            inputGRList: {},

            inputCL: '',
            inputCLbottom: '',
            inputCLList: {},

            inputCW: '',
            inputCWbottom: '',
            inputCWList: {},

            inputCB: '',
            inputCBbottom: '',
            inputCBList: {},

            inputHandel: ''
        }
    },
    created () {
        this.JLYList = this.$route.query.JLYList
        this.break()
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])

    },
    methods: {
        break () {
            // 综合备注
            if (this.JLYList.isPresence !== null) {
                this.inputHandel = this.JLYList.isPresence[0].remake
            }
            this.JLYList.trainMediumType.forEach(element => {
                if (Number(element.exclusiveId) === 11) {
                    this.$nextTick(() => {
                        this.inputWGList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputWGbottom = this.inputWG = element.isPresence[0].remake
                    }
                } else if (Number(element.exclusiveId) === 12) {
                    this.$nextTick(() => {
                        this.inputXDList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputXDbottom = this.inputXD = element.isPresence[0].remake
                    }
                } else if (Number(element.exclusiveId) === 13) {
                    this.$nextTick(() => {
                        this.inputXGList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputXGbottom = this.inputXG = element.isPresence[0].remake
                    }
                } else if (Number(element.exclusiveId) === 14) {
                    this.$nextTick(() => {
                        this.inputGRList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputGRbottom = this.inputGR = element.isPresence[0].remake
                    }
                } else if (Number(element.exclusiveId) === 15) {
                    this.$nextTick(() => {
                        this.inputCLList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputCLbottom = this.inputCL = element.isPresence[0].remake
                    }
                } else if (Number(element.exclusiveId) === 16) {
                    this.$nextTick(() => {
                        this.inputCWList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputCWbottom = this.inputCW = element.isPresence[0].remake
                    }
                } else {
                    this.$nextTick(() => {
                        this.inputCBList = element
                    })
                    if (element.isPresence !== null) {
                        this.inputCBbottom = this.inputCB = element.isPresence[0].remake
                    }
                }
            })
        },
        saveManageTrain (val, input) {
            if (input === '') {
                layer.msg('输入备注')
                return
            }
            if (val === 4) {
                if (this.inputCBList.isPresence === null || this.inputCWList.isPresence === null ||
            this.inputCLList.isPresence === null || this.inputGRList.isPresence === null ||
            this.inputXGList.isPresence === null || this.inputXDList.isPresence === null ||
            this.inputWGList.isPresence === null) {
                    layer.msg('尚未完善信息')
                    return
                }
            }

            saveManageTrain({
                user_card_no: this.leftInfo.cardNo, // 卡号
                userName: this.leftInfo.userName, // 姓名
                remake: input, // 备注
                operatorCard: this.userInfo.as_cardNo, // 操作人
                operatorName: this.userInfo.as_userName, // 操作人姓名
                exclusiveId: val // 专属ID
            }).then(res => {
                if (Number(res.data.StatusCode) === 0) {
                    layer.msg('保存成功')
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        }
    },
    watch: {
        $route () {
        }
    }
}
</script>
<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
</style>
